<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的全选与反选</title>
    <style>
        table {
            border-collapse: collapse;
            text-align: left;
            width: 50%;
            margin: 50px auto;
        }
        table,td,th {
            border: 1px solid gray;

        }
        th,td {
            padding: 10px 80px;
        }

    </style>
</head>
<body>
<table>
    <tr>
        <th><input type="checkbox" class="all"> 全选</th>
        <th>商品</th>
        <th>价格</th>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>苹果</td>
        <td>12</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>梨子</td>
        <td>14</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>香蕉</td>
        <td>16</td>
    </tr>
</table>
<script>
    const all = document.querySelector(".all")
    const item = document.querySelectorAll(".item")
    // 为我们的全选绑定事件
    all.addEventListener("click",function () {
        for(let i=0;i<item.length;i++){
            item[i].checked = all.checked
        }
    })
    // 为我们的单选绑定事件
    for(let i=0;i<item.length;i++){
        item[i].addEventListener("click",function () {
            all.checked = document.querySelectorAll('.item:checked').length === item.length
        })
    }

</script>
</body>
</html>